<template>
    <el-container>
        <el-header height="">
            <page-bar showBreadCrumb
                      v-if="post"
                      :pageInfo="pageInfo"
                      @query="query"></page-bar>
            <post-title-bar :title="post.title"
                            :collected="collectPost(post.id)!==null"
                            :management="management"
                            v-if="post"
                            @changeStatus="changeStatus"
                            @deletePost="deletePost"
                            @collect="collect"
                            @removeCollect="removeCollect"
                            @query="query"></post-title-bar>
        </el-header>
        <el-main>
            <host-item v-if="post&&pageInfo.page===1"
                       :post="post"
                       @comment="scrollUnder"></host-item>
            <div v-if="replies.length>0">
                <reply-item @listStorey="listStorey(reply.id)"
                            @reloadReply="query"
                            :management="management"
                            v-for="reply in replies"
                            :key="reply.id"
                            :reply="reply"></reply-item>
            </div>
        </el-main>
        <el-footer height="">
            <page-bar :pageInfo="pageInfo" @query="query"></page-bar>
            <post-comment ref="comment" @publish="review"></post-comment>
        </el-footer>
    </el-container>
</template>

<script>
    import PageBar from '@/components/common/PageBar'
    import PostTitleBar from '@/components/post/PostTitleBar'
    import ReplyItem from '@/components/postReply/ReplyItem'
    import HostItem from '@/components/postReply/HostItem'
    import PostComment from '@/components/post/PostComment'
    import { mapGetters, mapActions } from 'vuex'

    export default {
        name: 'post',
        components: {
            PageBar,
            PostTitleBar,
            ReplyItem,
            HostItem,
            PostComment
        },
        data () {
            return {
                post: null,
                replies: [],
                pageInfo: {
                    page: 1,
                    size: 20,
                    total: 0
                },
                queryInfo: {
                    type: '',
                    asc: '',
                    desc: ''
                },
                management: false
            }
        },
        mounted () {
            if (this.getUser) {
                this.action(this.currentCollectPostsAction())
            }
            this.action(this.getByIdAction(this.getPostId()), data => {
                this.post = data.data
                this.query()
            })
        },
        computed: {
            ...mapGetters({
                collectPost: 'post/collectPost',
                getUser: 'user/getUser'
            })
        },
        methods: {
            ...mapActions({
                getByIdAction: 'post/getById',
                deletePostAction: 'post/deletePost',
                collectPostAction: 'post/collectPost',
                removeCollectPostAction: 'post/removeCollectPost',
                currentCollectPostsAction: 'post/currentCollectPosts',
                pageReplyAction: 'reply/pageReply',
                reviewAction: 'reply/review',
                listStoreyAction: 'storey/listStorey'
            }),
            changeStatus () {
                this.management = !this.management
            },
            scrollUnder () {
                document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight - document.scrollingElement.clientHeight
            },
            getPostId () {
                let path = this.$route.path
                return path.substr(path.lastIndexOf('/') + 1, path.length)
            },
            query (queryInfo) {
                if (queryInfo) {
                    this.queryInfo = queryInfo
                }
                this.action(this.pageReplyAction({
                    postId: this.getPostId(),
                    page: this.pageInfo.page,
                    size: this.pageInfo.size,
                    type: this.queryInfo.type,
                    asc: this.queryInfo.asc,
                    desc: this.queryInfo.desc
                }), data => {
                    this.pageInfo.total = data.data.total
                    this.replies = data.data.records
                })
            },
            deletePost () {
                this.action(this.deletePostAction(this.post.id), data => {
                    let path = this.$route.path
                    let target = path.substr(0, path.lastIndexOf('/'))
                    this.$router.push({ path: target, query: { deletePost: true } })
                })
            },
            collect () {
                this.action(this.collectPostAction(this.post.id), data => {
                    this.$message.success('收藏成功')
                    this.post.collectCount++
                    this.action(this.currentCollectPostsAction())
                })
            },
            removeCollect () {
                this.action(this.removeCollectPostAction(this.post.id), data => {
                    this.$message.success('取消收藏成功')
                    this.post.collectCount--
                    this.action(this.currentCollectPostsAction())
                })
            },
            review (content) {
                this.action(this.reviewAction({ postId: this.getPostId(), content }), data => {
                    this.$message.success('评论成功')
                    this.pageInfo.page = Math.ceil(this.pageInfo.total / this.pageInfo.size)
                    this.query()
                })
            },
            listStorey (id) {
                this.action(this.listStoreyAction(id), data => {
                    this.replies.find(reply => reply.id === id).storeys = data.data
                })
            }
        }
    }
</script>

<style scoped>

</style>
